import type {
  LoadingConfig,
  AdaptiveConfig,
  PaginationProps
} from "@pureadmin/table";
import { ref, onMounted, reactive } from "vue";
import { getFlowList } from "@/api/user";

export function useColumns() {
  const dataList = ref([]);
  const loading = ref(true);
  const columns: TableColumnList = [
    {
      label: "流水ID",
      width: 80,
      prop: "reId"
    },
    {
      label: "流水编号",
      prop: "flowCode"
    },
    {
      label: "操作ID",
      prop: "flowRelId"
    },
    {
      label: "账号",
      prop: "account"
    },
    {
      label: "内容",
      prop: "content"
    },
    {
      label: "是否领取",
      prop: "revenueStatus",
      formatter: row => {
        return row.revenueStatus === 1 ? "已领取" : "未领取";
      }
    },
    {
      label: "余额",
      prop: "overMoney"
    },
    {
      label: "收益",
      prop: "overScore"
    },
    {
      label: "积分",
      prop: "overIntegral"
    },
    {
      label: "优惠点",
      prop: "overCoupon"
    },
    {
      label: "金额",
      prop: "money",
      formatter: row => {
        return (row.status == "1" ? "-" : "+") + row.money;
      }
    },
    {
      label: "支付方式",
      prop: "wallet",
      formatter: row => {
        switch (Number(row.wallet)) {
          case 0:
            return "余额";
          case 1:
            return "收益";
          case 2:
            return "积分";
          case 3:
            return "消费券";
          default:
            return "未知";
        }
      }
    },
    {
      label: "流水类型",
      prop: "type",
      formatter: row => {
        switch (Number(row.type)) {
          case 0:
            return "购买设备产品";
          case 1:
            return "管理直推收益";
          case 2:
            return "管理平级收益";
          case 3:
            return "管理收益";
          case 4:
            return "转账";
          case 5:
            return "节点分红";
          case 6:
            return "流量等级收益(设备等级)";
          case 7:
            return "直推流量收益";
          case 8:
            return "平级流量收益";
          case 9:
            return "流量收益";
          case 10:
            return "后台操作";
          case 11:
            return "提现";
          case 12:
            return "转账";
          case 13:
            return "领取流水收益";
          case 14:
            return "充值";
          case 15:
            return "购买商品";
          case 16:
            return "合伙人收益";
          case 17:
            return "参与盲盒";
          case 18:
            return "定投(购买算力下单)";
          case 19:
            return "定投收益(算力回报金额)";
          case 20:
            return "收益到期退回";
          case 21:
            return "用户购买买商品下单";
          case 22:
            return "用户下单购买会议或者旅游产品下单";
          case 23:
            // 处理值为 23 的两种情况
            return "会议或者旅游产品下单退回/完成任务，领取奖励";
          case 24:
            return "提现添加";
          default:
            return "未知";
        }
      }
    },
    {
      label: "时间",
      prop: "createdAt"
    }
  ];

  /** 分页配置 */
  const pagination = reactive<PaginationProps>({
    pageSize: 10,
    currentPage: 1,
    pageSizes: [10, 15, 20],
    total: 0,
    align: "right",
    background: true,
    size: "default"
  });

  const params = ref({ thisMonth: 1 });

  /** 加载动画配置 */
  const loadingConfig = reactive<LoadingConfig>({
    text: "正在加载第一页...",
    viewBox: "-10, -10, 50, 50",
    spinner: `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `
    // svg: "",
    // background: rgba()
  });

  /** 撑满内容区自适应高度相关配置 */
  const adaptiveConfig: AdaptiveConfig = {
    /** 表格距离页面底部的偏移量，默认值为 `96` */
    offsetBottom: 110
    /** 是否固定表头，默认值为 `true`（如果不想固定表头，fixHeader设置为false并且表格要设置table-layout="auto"） */
    // fixHeader: true
    /** 页面 `resize` 时的防抖时间，默认值为 `60` ms */
    // timeout: 60
    /** 表头的 `z-index`，默认值为 `100` */
    // zIndex: 100
  };

  function onSizeChange(val) {
    console.log("onSizeChange", val);
    dataList.value = [];
    pagination.currentPage = 1;
    loadData();
  }

  function onKeywordChange(val_) {
    console.log("onKeywordChange", val_);
    const val = Object.assign({}, val_);
    if (val.dateRange && val.dateRange.length == 2) {
      val.startTime = `${val.dateRange[0]} 00:00:00`;
      val.endTime = `${val.dateRange[1]} 23:59:59`;
      delete val.dateRange;
    }
    params.value = val;
    dataList.value = [];
    pagination.currentPage = 1;
    loadData();
  }

  function onCurrentChange(val) {
    loadingConfig.text = `正在加载第${val}页...`;
    console.log("onCurrentChange", val, pagination.currentPage);
    loading.value = true;

    loadData().then(() => {
      loading.value = false;
    });
  }

  function loadData() {
    params.value.page = pagination.currentPage;
    params.value.pageSize = pagination.pageSize;
    return new Promise((resolve, reject) => {
      getFlowList(params.value)
        .then(res => {
          const data = res.data;
          dataList.value = [...data.items];
          pagination.total = data.count;
          loading.value = false;
          resolve(res.data);
        })
        .catch(error => {
          reject(error);
        });
    });
  }

  onMounted(() => {
    loadData();
  });

  return {
    loading,
    columns,
    dataList,
    pagination,
    loadingConfig,
    adaptiveConfig,
    params,
    onSizeChange,
    loadData,
    onKeywordChange,
    onCurrentChange
  };
}
